<template>
	<div class="system-role-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="paperDialogFormRef" :model="state.ruleForm" size="default" label-width="90px" :rules="state.rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="壁纸标题" prop="title">
							<el-input v-model="state.ruleForm.title" placeholder="请输入壁纸标题" clearable :disabled="state.type === 'view'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="壁纸描述" prop="description">
							<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入壁纸描述" maxlength="150" :disabled="state.type === 'view'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="壁纸分类" prop="cateid">
							<el-select v-model="state.ruleForm.cateid" placeholder="请选择壁纸分类" @change="changeCate" :disabled="state.type === 'view'">
								<el-option :label="v.label" :value="v.value" v-for="(v, k) in cateList" :key="v.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="所需积分" prop="score">
							<el-input-number
								v-model="state.ruleForm.score"
								:min="0"
								:max="999"
								controls-position="right"
								placeholder="请输入所需积分"
								class="w100"
                :disabled="state.type === 'view'"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否热门" prop="is_hot">
							<el-switch
								v-model="state.ruleForm.is_hot"
								inline-prompt
								active-text="是"
								inactive-text="否"
								:active-value="2"
								:inactive-value="1"
                :disabled="state.type === 'view'"
							></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="壁纸状态" prop="status">
							<el-switch
								v-model="state.ruleForm.status"
								inline-prompt
								active-text="启用"
								inactive-text="禁用"
								active-value="normal"
								inactive-value="disable"
                :disabled="state.type === 'view'"
							></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="下载数量" prop="download_num">
							<el-input-number
								v-model="state.ruleForm.download_num"
								:min="0"
								:max="999"
								controls-position="right"
								placeholder="请输入下载数量"
								class="w100"
                :disabled="state.type === 'view'"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="收藏数量" prop="collect_num">
							<el-input-number
								v-model="state.ruleForm.collect_num"
								:min="0"
								:max="999"
								controls-position="right"
								placeholder="请输入收藏数量"
								class="w100"
                :disabled="state.type === 'view'"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="点赞数量" prop="love_num">
							<el-input-number
								v-model="state.ruleForm.love_num"
								:min="0"
								:max="999"
								controls-position="right"
								placeholder="请输入点赞数量"
								class="w100"
                :disabled="state.type === 'view'"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="壁纸图片" prop="img">
							<UploadFile
								@uploadSuccess="uploadSuccess"
								@uploadRemove="uploadRemove"
								:limit="1"
								acceptSuffix=".bmp,.jpg,.png"
								:imgList="state.fileList"
                :isDisabled="state.type === 'view'"
							></UploadFile>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemRoleDialog">
import { reactive, ref, nextTick, defineAsyncComponent } from 'vue';
import { paperDetail, addPaper, updatePaper } from '/@/api/paper';
import { ElMessage } from 'element-plus';

const UploadFile = defineAsyncComponent(() => import('/@/components/uploadFile/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义父组件向子组件传值
const props = defineProps({
	id: { type: Number, required: false, default: 0 },
	cateList: { type: Array<SelectOptionType>, required: true, default: () => [] },
});

// 定义变量内容
const paperDialogFormRef = ref();
const state = reactive({
	id: 0,
  type: '',
	fileList: <EmptyArrayType>[],
	ruleForm: <EmptyObjectType>{
    status: 'normal'
		// id: 0,
		// cateid: 0,
		// catename: '',
		// collect_num: 0,
		// description: '',
		// download_num: 0,
		// img: '',
		// is_hot: 1,
		// love_num: 0,
		// score: 0,
		// status: 'normal',
		// title: '',
	},
	rules: {
		title: [
			{
				required: true,
				message: '请输入壁纸标题',
				trigger: 'blur',
			},
		],
		cateid: [
			{
				required: true,
				message: '请选择壁纸分类',
				trigger: 'change',
			},
		],
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (type: string, id: number) => {
	if (type === 'edit') {
		state.id = id;
		state.dialog.title = '修改壁纸';
		state.dialog.submitTxt = '修 改';
	} else if(type === 'add') {
		state.dialog.title = '新增壁纸';
		state.dialog.submitTxt = '新 增';
		state.fileList = [];
	} else {
    state.id = id;
		state.dialog.title = '壁纸详情';
		state.dialog.submitTxt = '查 看';
  }
  state.type = type;
	state.dialog.isShowDialog = true;
	// 清空表单，此项需加表单验证才能使用
	nextTick(() => {
		paperDialogFormRef.value.resetFields();
		paperDialogFormRef.value.clearValidate();
	});
	if (id) {
		getPaperDetail();
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	paperDialogFormRef.value.validate((valid: boolean, fields: EmptyArrayType) => {
		if (valid) {
			if (state.id) {
				updatePaper(state.ruleForm).then((res: any) => {
					if (res.status === 'success') {
						closeDialog();
						emit('refresh');
					} else {
						ElMessage.error(res.msg);
					}
				});
			} else {
				addPaper(state.ruleForm).then((res: any) => {
					if (res.status === 'success') {
						closeDialog();
						emit('refresh');
					} else {
						ElMessage.error(res.msg);
					}
				});
			}
		} else {
			return false;
		}
	});
};
// 获取壁纸详情数据
const getPaperDetail = () => {
	paperDetail(state.id).then((res: any) => {
		if (res.status === 'success') {
			state.ruleForm = res.data;
			state.fileList = [{ url: res.data.img }];
		} else {
			ElMessage.error(res.msg);
		}
	});
};

// 上传成功
const uploadSuccess = (res: any, file: any) => {
	if (res.length > 0) {
		state.ruleForm.img = res[0].url;
	}
};
// 删除图片
const uploadRemove = (res: any, file: any) => {
	state.ruleForm.img = '';
};

// 分类改变
const changeCate = (option: any) => {
	let cateInfo: any = props.cateList.find((item: any) => item.value == option);
	state.ruleForm.catename = cateInfo.label;
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
